<!-- 手写签名的实现 -->

<template>
    <div class="container">
        <div class="content">
            <h2>s手写签名组件:</h2>
            <div class="sign">
                <vue-esign :isClearBgColor="false" ref="esign" :width="1000" :height="400" bgColor="#ccc"></vue-esign>
            </div>
            <div class="btns">
                <a-button type="primary" @click="handleReset">清空面板</a-button>
                <a-button type="primary" @click="handleGenerate">生成图片</a-button>
            </div>
        </div>
        <div class="imgArea">
            <h2>生成的签名图片</h2>
            <a-image v-if="resultImg" class="" style="width: 500px; height: 350px;" :src="resultImg"
                mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
            </a-image>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
 

let esign = ref()

// 定义清空签名板的回调函数
const handleReset = () => {
    esign.value.reset()
}

// 定义用于存储图片的变量（base64）
let resultImg = ref('')
// 定义生成图片的回调函数
const handleGenerate = () => {
    esign.value.generate().then((res: any) => {
        resultImg.value = res
    }).catch((err: any) => {
        alert(err) // 画布没有签字时会执行这里 'Not Signned'
    })
}


</script>

<style lang="less" scoped>
.container {
    width: 100%;
    // height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: rgba(0, 0, 0, .2);
    flex-direction: column;

    .content {
        width: 80%;
        // height: 95%;
        background-color: orange;

        .sign {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btns {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            button {
                margin: 8px;
            }
        }
    }
    .imgArea{
        width: 80%;
        height: 500px;
        margin-top: 16px;
        background-color: rgba(0,0,255,.2);
    }
}
</style>